<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String ctxPath = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ ctxPath + "/";
	String SYSTEM_NAME = "EZMES";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base id="baseUrl" href="<%=basePath%>"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><%=SYSTEM_NAME%></title>

<link rel="stylesheet" href="http://cdn.amazeui.org/amazeui/2.6.1/css/amazeui.min.css" />
<style>
/**
@font-face {
			font-style: normal;
			src: url(fonts/FZLTHJW.TTF);
			font-family: '现代兰亭';
			
		}

**/

* {font-family: 微软雅黑}
html,body,.page {
	height: 100%;
}

#wrapper {
	position: absolute;
	top: 49px;
	bottom: 0;
	overflow: hidden;
	margin: 0;
	width: 100%;
	padding: 0 8px;
	background-color: #f8f8f8;
}

.am-list {
	margin: 0;
}

.am-list>li {
	background: none;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.pull-action {
	text-align: center;
	height: 45px;
	line-height: 45px;
	color: #999;
}

.pull-action .am-icon-spin {
	display: none;
}

.pull-action.loading .am-icon-spin {
	display: block;
}

.pull-action.loading .pull-label {
	display: none;
}
</style>
</head>

<body>
	<div class="page">
		<header data-am-widget="header" class="am-header am-header-default" style="background-color:#FFFFFF;" >
		<div class="am-header-left am-header-nav">
			<a href="#doc-oc-demo1" data-am-offcanvas> <i
				class="am-header-icon am-icon-bars " style="margin-top:15px;color: #3c70b6;"></i> </a>
		</div>
		<div class="am-header-right am-header-nav">
			<a href="" data-am-offcanvas> <i
				class="am-header-icon am-icon-search" style="margin-top:15px;color:#3c70b6;"></i> </a>
		</div>
		<h1 class="am-header-title" style="color: black;">资讯</h1>
		</header>
	<!-- 	<header data-am-widget="header" class="am-header am-header-default" style="height: 110px; line-height: 110px;">
			<div class="am-header-left am-header-nav">
				<a href="#doc-oc-demo1" data-am-offcanvas>
					<i class="am-header-icon am-icon-home am-icon-sm"></i>
				</a>
			</div>
			<h1 class="am-header-title" style="font-size: 4rem;"><a href="#doc-oc-demo1" data-am-offcanvas>资讯</a></h1>
		</header>
		 -->
		<!--
        	作者：xiaofuwei008@sina.com
        	时间：2016-04-04
        	描述：侧边栏
        -->
		<div id="doc-oc-demo1" class="am-offcanvas">
			<div class="am-offcanvas-bar">
				<div class="am-offcanvas-content">
					<div class="am-container" id="typeDivId">
						<div class="am-g" style="margin-top: 20px;">
							<div class="am-u-sm-12">
								<a id="guanbicebianlan" data-rel="close"> <img
									src="img/arrow_back_24px_1181650_easyicon.net.ico" /> </a>
							</div>
						</div>
						<div class="am-g" style="margin-top: 20px;">
							<div class="am-u-sm-11 am-u-sm-offset-1" >
								<a  href="javascript:0">
									<span>全部</span>
							    </a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="wrapper" data-am-widget="list_news"
			class="am-list-news am-list-news-default"
			style="margin: 0px;padding: 0px;">
			<div class="am-list-news-bd">
				<div class="pull-action loading" id="pull-down" style="display: none;">
					<span class="am-icon-arrow-down pull-label" id="pull-down-label">
						下拉刷新</span> <span class="am-icon-spinner am-icon-spin"></span>
				</div>
				<div data-am-widget="slider" class="am-slider am-slider-a1"
					data-am-slider='{&quot;directionNav&quot;:true}'>
					<ul class="am-slides" id="slidesDivId">
						  <li class="lunboId">
						  	<img src="<%=basePath %>news/get_rollImg?start=0" onclick="javascript:img_info(this.src,0);" onerror="this.src='webapp/img/banner_1.jpg'">
						</li>
						  <li class="lunboId"><img src="<%=basePath %>news/get_rollImg?start=1" onclick="javascript:img_info(this.src,1);" onerror="this.src='webapp/img/banner_2.jpg'">
						</li>
						  <li class="lunboId"><img src="<%=basePath %>news/get_rollImg?start=2" onclick="javascript:img_info(this.src,2);" onerror="this.src='webapp/img/banner_4.jpg'">
						</li>
					</ul>
				</div>
				<ul class="am-list" id="events-list">
					<li class="am-list-item-desced" style="border-top:0px">
						<div class="am-list-item-text">正在加载内容...</div></li>
				</ul>
				<div class="pull-action" id="pull-up">
					<span class="am-icon-arrow-up pull-label" id="pull-up-label">
						上拉加载更多</span> <span class="am-icon-spinner am-icon-spin"></span>
				</div>
			</div>
		</div>
	</div>
	<script src="<%=basePath %>/webapp/js/jquery-1.11.0.min.js"></script>
	<script src="<%=basePath %>/webapp/js/handlebars.min.js"></script>
	<script type="text/x-handlebars-template" id="tpi-list-item">
			{{#each this}}
			<li class="am-list-item-desced" data-id="{{id}}">
				<a href="<%=basePath %>newsApi/getNewsById?news.n_id={{n_id}}" class="am-list-item-hd">
				  <div class="am-g">
				  	<div class="am-u-sm-3">
				  		<img src="<%=basePath %>{{n_title_img}}" style="width:66px;height:66px;"/>
				  	</div>
				  	<div class="am-u-sm-9 am-list-item-text" style="margin-top:1px;max-height: 3.5em;height:150px;line-height:1.8em">
				  		<div style="font-size:16px;margin-top:-2px;color:#404041">{{n_title}}</div>
				  	</div>
					<div class="am-u-sm-3  am-list-item-text" style="margin-top:4px;padding-left:10px;padding-right:0px;color:#88a8e;font-size:12px;padding-bottom:0px;padding-top:3px">{{n_author}}</div>
					<div class="am-u-sm-2  am-list-item-text" style="margin-top:4px;padding-left:10px;padding-right:0px;color:#88a8e;font-size:12px;padding-top:3px">{{n_date}}</div>
					<div class="am-u-sm-4 am-u-sm-offset-3 am-list-item-text" style="text-align:right;margin-top:4px;padding-left:10px;padding-right:12px;color:#88a8e;font-size:12px;padding-top:3px;color:{{yanse}}">{{newsType.nt_name}}</div>
				  </div>
				</a>
			</li>
			{{/each}}
		</script>
	<script src="http://cdn.amazeui.org/amazeui/2.6.1/js/amazeui.min.js"></script>
	<script>
	var type = 0;
		/**
		 * js关闭侧边栏
		 */
		function guanbicebianlan() {
			var id = '#doc-oc-demo1';
			var $myOc = $(id);
			$('#guanbicebianlan').on('click', function() {
				$myOc.offCanvas($(this).data('rel'));
			});
		}
		/**
		 * js关闭侧边栏
		 */
		function guanbicebianlan2() {
			var id = '#doc-oc-demo1';
			var $myOc = $(id);
			$myOc.offCanvas('close');
			
		}
	(function($) {
			guanbicebianlan();
			var EventsList = function(element, options) {
				var $main = $('#wrapper');
				var $list = $main.find('#events-list');
				var $pullDown = $main.find('#pull-down');
				var $pullDownLabel = $main.find('#pull-down-label');
				var $pullUp = $main.find('#pull-up');
				var topOffset = -$pullDown.outerHeight();
				this.compiler = Handlebars.compile($('#tpi-list-item').html());

				this.prev = this.next = this.start = options.params.start;
				this.total = null;
				this.getURL = function(params) {
					var queries = [ 'callback=?' ];
					for ( var key in params) {
						if (key == 'count') {
							queries.push(key + '=' + params[key]);
							
						}
					}
					queries.push('&nt_id='+type+'&');
					queries.push('start=');
					var uuuu = options.api + '?' + queries.join('&');
					return uuuu;
				};
				this.renderList = function(start, type) {
					var _this = this;
					var $el = $pullDown;
					if (type === 'load') {
						$el = $pullUp;
					}
					$.ajax({
						type : "get",
						url  : this.URL + start,
						data : "",
						success:function(data){
							console.log(data);
							_this.total = data.total;
							var html = _this.compiler(data.events);
							if (type === 'refresh') {
								$list.children('li').first().before(html);
								$list.children('li').first().before(html);
							} else if (type === 'load') {
								$list.append(html);
							} else {
								$list.html(html);
							}
							// refresh iScroll
							setTimeout(function() {
								_this.iScroll.refresh();
							}, 100);
							
							
							_this.resetLoading($el);
							if (type !== 'load') {
								_this.iScroll.scrollTo(0, 0, 800, $.AMUI.iScroll.utils.circular);
							}
						}
					});
				};
				this.setLoading = function($el) {
					$el.addClass('loading');
				};
				this.resetLoading = function($el) {
					$el.removeClass('loading');
				};
				this.init = function() {
					var myScroll = this.iScroll = new $.AMUI.iScroll(
							'#wrapper', {
								click : true
							});
					// myScroll.scrollTo(0, topOffset);
					var _this = this;
					var pullFormTop = false;
					var pullStart;
					this.URL = this.getURL(options.params);
					this.renderList(options.params.start);
					myScroll.on('scrollStart', function() {
						if (this.y >= topOffset) {
							pullFormTop = true;
						}
						pullStart = this.y;
						// console.log(this);
					});
					myScroll.on('scrollEnd', function() {
						if (pullFormTop && this.directionY === -1) {
							_this.handlePullDown();
						}
						pullFormTop = false;
						// pull up to load more
						if (pullStart === this.y && (this.directionY === 1)) {
							_this.handlePullUp();
						}
					});
				};
				this.handlePullDown = function() {
					$("#events-list").children('li').remove(); 
					var app = new EventsList(null, {
						api : $('#baseUrl').attr("href")+'newsApi/query_allNewsByPage',
						params : {
							start : 0,
							count : 10,
							nt_id : type
						}
					});
					app.init();
				};
				this.handlePullUp = function() {
					console.log('handle pull up');
					if (this.next < this.total) {
						this.setLoading($pullUp);
						this.next += options.params.count;
						this.renderList(this.next, 'load');
					} else {
						console.log(this.next);
						// this.iScroll.scrollTo(0, topOffset);
					}
				}
			};
			$(function() {
				getAllNewsType();
				deleteImg();
				var app = new EventsList(null, {
					api : $('#baseUrl').attr("href")+'newsApi/query_allNewsByPage',
					params : {
						start : 0,
						count : 10,
						nt_id : type
					}
				});
				app.init();
				$("#doc-oc-demo1 a").click(function(){
					var str = this;
					str = str+"";
					var arr = str.split(':');
					var temp = arr[1];
					if(temp == null) return;
					type = temp;
					app.init();
					guanbicebianlan2();
					
				});
			});
			document.addEventListener('touchmove', function(e) {
				e.preventDefault();
			}, false);
		})(window.jQuery);
		function getAllNewsType(){
			$.ajax({
				type:"post",
				data:"",
				async: false,
				url : $('#baseUrl').attr("href")+'newsTypeApi/getAllNewsType',
				success:function(data){
					if(data == null) return;
					$.each(data,function(m,n){
						var html = "<div class=\"am-g\" style=\"margin-top: 20px;\">"+
						"<div class=\"am-u-sm-11 am-u-sm-offset-1\" >"+
						"<a  href=\"javascript:"+n.nt_id+"\">"+
							"<span>"+n.nt_name+"</span>"+
					    "</a>"+
					"</div>"+
				"</div>";
				$("#typeDivId").append(html);
					});
				}
			});
		}
		function deleteImg(){
			var $lis = $(".lunboId");
		}
		function rgb(){
			var r=Math.floor(Math.random()*255);
			var g=Math.floor(Math.random()*255);
			var b=Math.floor(Math.random()*255);
			var rgb='rgb('+r+','+g+','+b+')';
			return rgb;
		}
		function img_info(src,start){
			if(src == $('#baseUrl').attr("href")+'webapp/img/moren.png')
				return;
			window.location.href=$('#baseUrl').attr("href")+'newsApi/get_rollNews?start='+start; 
		}
		var yanse = ["ffcd01","7ca4d5","3c70b6"];
		function suiji(){
			var i = Math.floor(Math.random()*2);
			
		}
	</script>
</body>
<style>
		
	</style>
</html>
